<!DOCTYPE html>
<html>
<head>
#include("/admin/_common/head.html")
<title>系统参数</title>
</head>
<body class="pear-container">
    <div class="layui-panel query-panel /*查询面板*/">
        <form id="main-form" class="layui-form layui-row layui-col-space16" lay-filter="main-form" onsubmit="return false;">
        	<div class="layui-col-xl2 layui-col-lg2 layui-col-md2 layui-col-sm3 layui-col-xs6">
				<div class="layui-input-wrap">
					<div class="layui-input-prefix">
						<i class="pear-icon pear-icon-text"></i>
					</div>
					<input type="text" name="word" value="#(word??)" placeholder="模糊查询" autocomplete="off" class="layui-input" lay-affix="clear">
				</div>
		    </div>
        	<div class="layui-col-xl2 layui-col-lg2 layui-col-md2 layui-col-sm3 layui-col-xs6">
				<div class="layui-input-wrap">
                    <select name="type">
                        <option value="">-- 状态 --</option>
                    #DICTS(type="config_type")
                    #for(item : dicts)
                        <option value="#(item.value)"#if(type?? == item.value) selected#end>#(item.label)</option>
                    #end
                    </select>
                </div>
            </div>
            <div class="layui-col-xl2 layui-col-lg2 layui-col-md2 layui-col-sm3 layui-col-xs6">
                <div class="layui-btn-group">
                    <button id="main-form-search" type="button" class="layui-btn layui-btn-sm">
                        <i class="layui-icon layui-icon-search"></i> 搜索
                    </button>
                    <button id="main-form-reset" type="button" class="layui-btn layui-btn-sm layui-btn-primary">
                        <i class="layui-icon layui-icon-refresh"></i> 重置
                    </button>
                </div>
            </div>
        </form>
    </div>
    <div class="layui-panel table-panel /*表格面板*/">
        <table id="main-table"></table>
        <script id="main-pagebar" type="text/html">
            <!--#DEBUG()-->
            <div class="layui-btn-container">
                <button class="pear-btn pear-btn-xs" lay-event="pagebarBtn1">分页栏按钮1</button>
                <button class="pear-btn pear-btn-xs" lay-event="pagebarBtn2">分页栏按钮2</button>
            </div>
            <!--#end-->
        </script>
    </div>

#include("../../_common/data_table_template.html")
#include("../../_common/foot.html")

<script type="text/javascript">
layui.use(['jquery', 'dropdown'], () => {
    let $ = layui.jquery, dropdown = layui.dropdown;

    //定义表格模块基本参数
    let module = {
        type: TABLE_TYPE.dataTable,             //表格类型：二维表格
        idField: 'id',                          //表格中 id 的字段名（与数据库定义的要一致，如userId）
        name: '系统参数',                        //表格模块的业务名称
        path: '#CTX()/admin/system/config/',    //表格模块的操作路径，以 '/' 结尾
    };

    //定义查询表单基本参数
    let queryForm = {
        id: 'main-form',                        //查询面板中 form 表单的 id 属性
        searchButtonId: 'main-form-search',     //查询面板中搜索按钮的 id 属性
        resetButtonId: 'main-form-reset',       //查询面板中重置按钮的 id 属性
    };

    //定义编辑对话框基本参数
    let editDialog = {
        submitFormId: 'edit-form',              //编辑页面（模态）中 form 表单的 ID 属性
        submitButtonId: 'submit-button',        //编辑页面（模态）中提交按钮的 ID 属性
        width: '720px',                         //对话框宽度
        height: '600px',                        //对话框高度
    };

    //定义表格操作基本参数
    let actions = {
        //#authPermissions('system:config:add')
        addFlag: true,                                      //新增记录权限标志
        addUrl: module.path + 'add',                        //新增记录 URL
        //#end
        //#authPermissions('system:config:edit')
        editFlag: true,                                     //修改记录权限标志
        editUrl: module.path + 'edit',                      //修改记录 URL
        //#end
        //#authPermissions('system:config:del')
        removeFlag: true,                                   //删除记录权限标志
        removeUrl: module.path + 'delete',                  //删除记录 URL
        batchRemoveFlag: true,                              //批量删除 URL
        batchRemoveUrl: module.path + 'delete',             //批量删除 URL
        //#end
        //#authPermissions('system:config:query')
        detailFlag: true,                                   //记录详情权限标志
        detailUrl: module.path + 'detail',                  //记录详情 URL
        //#end
        //事件处理
        handleEvent: (options, event, obj) => {
            //#DEBUG()
            console.log("事件处理器：event=" + event + "，obj=" + obj);
            if (event === 'test') {
                $.modal.msg('点击了头部工具栏按钮');
            }
            if (event === 'pagebarBtn1') {
                $.modal.msg('点击了分页栏按钮1');
            }
            if (event === 'pagebarBtn2') {
                $.modal.msg('点击了分页栏按钮2');
            }
            if (event === 'selectRows') {
                $.modal.msg('已选择 ' + obj.count + ' 行记录');
            }
            if (event === 'rowContextmenu') {
                var data = obj.data;            // 得到当前行数据
                var dataCache = obj.dataCache;  // 得到当前行缓存数据，包含特定字段 --- 2.8.8+
                var index = obj.index;          // 得到当前行索引
                var tr = obj.tr;                // 得到当前行 <tr> 元素的 jQuery 对象
                var options = obj.config;       // 获取当前表格基础属性配置项
                var e = obj.e;                  // 当前的 jQuery 事件对象 --- 2.9.14+

                // 右键操作
                dropdown.render({
                    trigger: 'contextmenu',
                    show: true,
                    data: [
                        {title: '右键子菜单1', id: 'submenu1'},
                        {title: '右键子菜单2', id: 'submenu2'}
                    ],
                    click: function(menuData, othis) {
                        $.modal.msg('点击了' + menuData.title);
                    }
                });
            }
            if (event === 'rowContextmenu') {
                let data = obj.data;            // 得到当前行数据
                let dataCache = obj.dataCache;  // 得到当前行缓存数据，包含特定字段 --- 2.8.8+
                let index = obj.index;          // 得到当前行索引
                let tr = obj.tr;                // 得到当前行 <tr> 元素的 jQuery 对象
                let options = obj.config;       // 获取当前表格基础属性配置项
                let e = obj.e;                  // 当前的 jQuery 事件对象 --- 2.9.14+

                // 右键操作
                dropdown.render({
                    trigger: 'contextmenu',
                    show: true,
                    data: [
                        {title: '右键子菜单1', id: 'submenu1'},
                        {title: '右键子菜单2', id: 'submenu2'}
                    ],
                    click: function(menuData, othis) {
                        $.modal.msg('点击了' + menuData.title);
                    },
                });
            }
            if (event === 'titleMenu') {
                let col = obj.col;          // 获取当前列属性配置项
                let options = obj.config;   // 获取当前表格基础属性配置项
                let layEvent = obj.event;   // 获得自定义元素对应的 lay-event 属性值
                let elem = $('#' + options.id).next().find(' thead [data-key="' + obj.col.key + '"]');  //查询指定表格被点击的 data-key="obj.col.key" 列标题代表的元素
                // 右键操作
                dropdown.render({
                    elem: elem,
                    show: true,
                    data: [
                        {title: '标题菜单1', id: 'titlemenu1'},
                        {title: '标题菜单2', id: 'titlemenu2'}
                    ],
                    click: function(titleData, othis) {
                        $.modal.msg('点击了' + titleData.title);
                    },
                });
            }
            //#end
        },
        //回调处理
        callbackEvent: (options, event, result) => {
            //#DEBUG()
            console.log("回调处理器：event=" + event + "， result=" + result);
            //#end
        },
    };

    let toolbarButtons = '';
    let rowButtons = '';
    //#DEBUG()
    toolbarButtons = '<button class="pear-btn pear-btn-sm" lay-event="test">头部工具栏按钮</button>';
    rowButtons += '<button class="pear-btn pear-btn-xs" round plain id="more_{{d.id}}" data-id="{{d.id}}"><i class="layui-icon layui-icon-triangle-d"></i>&nbsp;下拉</button>';
    //#end

    //定义数据表格的 options，参考：https://layui.dev/docs/2/table/#options
    let options = {
        id: 'main-table',                                               //设定实例唯一索引
        elem: '#main-table',                                            //绑定原始 table 元素
        title: module.name,                                             //定义 table 的大标题（在文件导出等地方会用到）
        url: module.path + 'query',                                     //发送异步请求的 URL
        initSort: {'field': 'createdDatetime', 'type': 'desc'},         //初始排序状态
        toolbar: $.table.buildTableToolbar(actions, toolbarButtons),    //开启表格头部工具栏
        pagebar: '#main-pagebar',                                       //开启分页区域的自定义模板
        cols: [[                                                        //表头属性集
            {type: 'checkbox', align: 'center', width: 60},
            {field: 'name', align: 'left', minWidth: 130, width: '10%', sort: true, title: '参数名'},
            {field: 'code', align: 'left', minWidth: 150, width: '14%', sort: true, title: '参数代码'},
            {field: 'value', align: 'left', minWidth: 150, width: '15%', sort: true, title: '参数值'},
            {field: 'type', align: 'center', width: 110, sort: true, title: '参数类型', templet: '#bean-configType'},
            {field: 'isSys', align: 'center', width: 110, sort: true, title: '系统类型', templet: '#bean-isSys'},
            {field: 'remark', align: 'left', minWidth: 150, width: '15%', title: '说明 #DEBUG()<i class="layui-icon layui-icon-note" lay-event="titleMenu"></i>#end'},
            {field: 'createdDatetime', align: 'center', width: 160, sort: true, title: '创建时间', templet: '#bean-createdDatetime'},
            {align: 'left', minWidth: 240, templet: $.table.buildRowToolbar(actions, rowButtons)},
        ]],
        //#DEBUG()
        done: (res, curr, count, origin) => {
            for (var i = 0; i < res.data.length; i++) {
                var data = [];
                var id = res.data[i].id;
                data.push({title: '下拉子菜单1', menuId: 100, id: id, disabled: false});
                data.push({title: '下拉子菜单2', menuId: 101, id: id, disabled: false});

                dropdown.render({
                    elem: '#more_' + id,
                    data: data,
                    id: '#more_' + id,
                    click: (obj) => {
                        if (obj.menuId == 100) {
                            $.modal.msg('点击了下拉子菜单1');
                        }
                        if (obj.menuId == 101) {
                            $.modal.msg('点击了下拉子菜单2');
                        }
                    }
                });
            }
        },
        //#end
        module: module,             //表格模块基本参数
        queryForm: queryForm,       //查询表单基本参数
        editDialog: editDialog,     //编辑对话框基本参数
        actions: actions,           //表格操作基本参数
    };

    $(document).ready(() => {
        /**
         * 初始化数据表格
         */
        options = $.table.init(options);
    });

});
</script>
</body>
</html>
